<template>
  <div>
    <el-dialog
      v-dialogDrag
      title="选择值"
      :visible.sync="showMemberTree"
      append-to-body
      width="55%"
      top="2%"
      @close="cancel"
    >
      <!-- 引入 -->
      <el-tabs @tab-click="changeTab" v-model="name">
        <el-tab-pane label="所有成员" name="0">
          <all-Members
            ref="allMembers"
            :indexItems="indexItems"
            :dictCode="dictCode"
            :itemData="itemData"
            @selectDataFunc="selectDataFunc"
          ></all-Members>
        </el-tab-pane>
        <el-tab-pane label="关系树展示" name="1">
          <relation-tree
            ref="relationTree"
            :indexItems="indexItems"
            :itemData="itemData"
            :dictCode="dictCode"
            :mulSelect="mulSelect"
            @selectDataFunc="selectDataFunc"
          ></relation-tree>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
  </div>
  <!-- 新增编辑查看弹窗 -->

  <!-- 配置层级弹窗 -->
</template>

<script>
// import iscroll from 'iscroll'
import { publicManage } from "@/api/index";
import upperTemplate from "@/components/upperTemplate.vue";
import ruleDefComponents from "@/components/ca/ruleDefComponents";
import allMembers from "@/components/ca/allMembers";
import relationTree from "@/components/ca/relationTree";
export default {
  name: "memberAndTree",
  components: {
    upperTemplate,
    ruleDefComponents,
    allMembers,
    relationTree,
  },
  props: {
    toShowMemberTree: {
      type: Boolean,
      default: false,
    },
    dictCode: {
      type: String,
      defualt: "",
    },
    indexItems: {
      type: Number,
      default: 0,
    },
    //选中的值
    itemData: {
      type: Array,
      default: () => [],
    },
    mulSelect: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      showMemberTree: true,
      name: "0",
    };
  },
  created() {},
  mounted() {
    this.showMemberTree = this.toShowMemberTree;
    if (this.showMemberTree) {
       this.$nextTick(() => {
        this.init();
      });
    }
  },
  watch: {
    toShowMemberTree(val) {
      this.showMemberTree = val;
      if (this.showMemberTree) {
        this.$nextTick(() => {
          this.init();
      });
      }
    },
  },
  methods: {
    init() {
      var _self = this;
      this.name = "0";
      this.$nextTick(() => {
        _self.$refs.allMembers.init();
        _self.$refs.relationTree.init();
      });
    },
    selectDataFunc(val) {
      this.$emit("selectDataFunc", val);
    },
    changeTab(val) {
      console.log(val);
    },
    // 取消
    cancel() {
      this.$emit("selectDataFunc", "");
    },
  },
};
</script>

<style lang="scss" scoped>
</style>